import React from 'react';
import {Button, Popover} from "antd";
import {CaretDownOutlined, PlusOutlined, SettingOutlined} from "@ant-design/icons";
import {MenuDataItem} from "@ant-design/pro-layout";
import history from 'history/browser';
import classNames from 'classnames';
import './index.less';

export type HeaderModulesItem = {
    id: string;
    icon?: string;
    name: string;
    path?: string;
    onClick?: (key: string) => void;
    children: MenuDataItem[];
};

export type HeaderModulesProps = {
    menuData?: HeaderModulesItem[];
};


class MenuCard extends React.Component<HeaderModulesProps, any> {


    getOprations = (): any => {
        return (
            <div
                className={classNames("footerBtn", {
                    "divider": true,
                })}>
                <div><PlusOutlined/> 新建应用</div>
                <div><SettingOutlined/> 设置</div>
            </div>
        );
    };

    render() {
        const {menuData}: any = this.props;
        return <div>
            <ul className={'l-header-modules-list'}>
                {
                    menuData.map((item: HeaderModulesItem) => {
                        return <li
                            className={classNames({
                                'checked': false, //checkedSystem && checkedSystem.id == item.id;
                            })} key={item.id} onClick={() => {
                            if (item.path) {
                                history.push(`/#${item.path}`);
                                history.go(0);
                            }
                        }}>
                            <img src={item.icon} alt="icon"/>
                            <span>{item.name}</span>
                               </li>;
                    })
                }
            </ul>
            {
                this.getOprations()
            }
               </div>;
    }
}


class HeaderMenu extends React.Component<any, any> {
    state = {
        visible: false,
    };

    render() {
        const {visible} = this.state;
        return <div
            className={'l-header-menu'}
            id={'l-header-menu'}>
            <Button type="link">
              <span style={{fontWeight: 600}}>
                <Popover
                    onVisibleChange={(status) => this.setState({visible: status})}
                    placement="bottomLeft"
                    getPopupContainer={() => document.getElementById('l-header-menu')}
                    content={<MenuCard menuData={this.props.menuData}/>}
                    trigger="click">
                  <span style={{color: '#fff'}}>首页</span>
                    <CaretDownOutlined rotate={visible ? 180 : 0} style={{marginLeft: 5}}/>
                </Popover>
              </span>
            </Button>
               </div>;
    }
}


export default HeaderMenu;
